<template>
	<view>
		<Header txt="高效代理" v-if="baidu"></Header>
		<HeaderB txt="高效代理" v-if="!baidu"></HeaderB>
		<view class="high_list">
			<view class="high_tit">
				高效代理
			</view>
			<view class="high_text">
				千万级IP资源、覆盖全国各地、绿色纯净快速稳定
			</view>
		</view>
		<view class="img_tit">
			<view class="img_tit_con">
				什么是高效代理
				<text>
					<image  src="" class="img_tit_img"></image>
				</text>
			</view>
		</view>
		<view class="img_tit_text">
			高效代理提供真实的代理IP,所取即所用，平均时效5分钟，提取数量可以进行自由选择，有包时，包量多种套餐可供选择，高效代理IP数量最多分布范围最广，线路绿色，稳定性极高
		</view>
		<view class="img_tit">
			<view class="img_tit_con">
				产品特点
				<text>
					<image  src="" class="img_tit_img"></image>
				</text>
			</view>
		</view>
		<view class="product_list">
			<view class="item">
				<image src="../../static/other/8.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					IP数量最多
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/14.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					分布范围最广
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/9.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					稳定性高
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/10.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					真实IP
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/11.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					API接入
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/12.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					需要白名单验证
				</view>
			</view>
			<view class="item">
				<image src="../../static/other/13.png"  mode="aspectFit"></image>
				<view class="product_list_text">
					地区随机
				</view>
			</view>
		</view>
		<view class="img_tit">
			<view class="img_tit_con">
				使用场景
				<text>
					<image  src=" " class="img_tit_img"></image>
				</text>
			</view>
		</view>
		<view class="use_list">
			<view class="use_list1">
				<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/product/5.png" mode="aspectFit"></image>
				<text class="use_list_right">高效代理适合代理<text class="color_text">需求量大，时效短，提取数量自由控制的客户</text></text>
			</view>
			<view class="use_list1">
				<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E9%A6%96%E9%A1%B5/product/4.png" mode="aspectFit"></image>
				<text class="use_list_right">例如:数据采集，营销等需要使用具体代理IP的业务场景</text>
			</view>
		</view>
		<view class="use_btn">
			<text class="use_btn1">
				<button type="default">免费体验</button>
			</text>
			<text class="use_btn2">
				<button type="default">立即购买</button>
			</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {	
				baidu:true
			}
		},
		onShow(){
			this.browseWeb()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		methods: {
			browseWeb(){
				let that=this
				that.$store
					.dispatch("BrowseWeb")
					.then((response) => {
						let data = response
						console.log(111,data);
						if (data.code == "0") {	    
						}        
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.use_btn{
		width: 90%;
		margin: 0 auto;
		margin-top: 240rpx;
		margin-bottom: 48rpx;
		clear: both;
		.use_btn1{
			float: left;
			width: 45%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;			
			color: #ffffff;
			font-size: 28rpx;
			button{
				background-color: #646c79;
			}
		}
		.use_btn2{
			float: right;
			width: 45%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;			
			color: #ffffff;
			font-size: 28rpx;
			button{
				background-color: #2e87ff;
			}
		}
	}
	.use_list{
		.use_list1{
			margin: 56rpx 36rpx 0;
			width: 90%;
		}
		image{
			width: 86rpx;
			height: 86rpx;
		}
		.use_list_right {
		    float: right;
		    width: 80%;
		    font-size: 28rpx;
		    line-height: 50rpx;
			.color_text{
				color: #3474fc;
			}
		}
	}
	.product_list{
		overflow: hidden;
		margin-top: 96rpx;
		.item{
			width: 33.3%;
			height: 220rpx;
			text-align: center;
			float: left;
			margin-bottom: 20rpx;
			image{
				width: 116rpx;
				height: 121rpx;
				margin-bottom: 30rpx;
			}
			.product_list_text{
				color: #222222;
				font-size: 30rpx;
			}
		}
	}
	.high_list{
		width: 100%;
		height: 300rpx;
		background: url();
		background-size: cover;
		background-position: 0 -96rpx;
		color: #ffffff;
		position: relative;		
		text-align: center;
		.high_tit {
		      font-size: 48rpx;
		      font-weight: bold;
		      // padding-top: 96rpx;
		    }
		.high_text {
		    padding-top: 28rpx;
			font-size: 24rpx;
		}
	}
	.img_tit{
		text-align: center;
		margin-top: 96rpx;
		.img_tit_con{
			display: inline-block;
			font-size: 48rpx;
			font-weight: bold;
			position: relative;
		}
		.img_tit_con::before {
		      content: "";
		      position: absolute;
		      background: url("../../static/other/7.png") no-repeat center;
		      background-size: contain;
		      width: 38rpx;
		      height: 28rpx;
		      left: -66rpx;
		      top: 18rpx;
		}
		.img_tit_con::after {
		      content: "";
		      position: absolute;
		      background: url("../../static/other/7.png") no-repeat center;
		      background-size: contain;
		      width: 38rpx;
		      height: 28rpx;
		      right: -66rpx;
		      top: 18rpx;
		}
		.img_tit_img{
			position: absolute;
			width:57.6rpx;
			height: 42rpx;
			left: 34%;
			top: -30rpx;
		}
	}
	.img_tit_text{
		width: 85%;
		margin: 0 auto;
		font-size: 28rpx;
		line-height: 48rpx;
		margin-top:48rpx;
		color: #222222;
	}
</style>
